<template>
<div class="revenue-excel">
  <div class="table-title">
    <el-date-picker
      v-model="dateTime"
      type="daterange"
      :editable="false"
      :clearable="false"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="getDate">
    </el-date-picker>
    <el-button type="primary" @click="initList" data-auth="store_report_revenue_query">查询</el-button>
  </div>
  <div class="table-main" v-if="!!listData">
    <div class="main-rows">
      <div class="main-title">
        营收汇总<span>（入住日期维度）</span>
      </div>
      <div class="main-text">
        <h5 class="text-title">客房汇总</h5>
        <div class="table-text">
          <div class="table-rows">
            <p>{{listData.RoomCount}}</p>
            <p>入住房间</p>
          </div>
          <div class="table-rows">
            <p>{{listData.Percent}}%</p>
            <p>入住占比</p>
          </div>
          <div class="table-rows">
            <p>￥{{listData.AvgPrice}}</p>
            <p>平均房价</p>
          </div>
          <div class="table-rows">
            <p>￥{{listData.AllAmount}}</p>
            <p>营收</p>
          </div>
        </div>
      </div>
    </div>
    <div class="main-rows">
      <div class="main-title">
        收支报表<span>（收款/退款时间维度）</span>
  			<el-button type="primary" @click="handleExcel" style="float:right;" data-auth="store_report_revenue_exportpayment">导出</el-button>
      </div>
      <div class="main-text">
        <h5 class="text-title">收入
          <p>￥{{listData.PayInfo.AllAmount}}</p>
        </h5>
        <div class="table-text border1">
          <div class="table-rows" v-for="m in listData.PayInfo.List[0]" :key="m.Name">
            <p>{{m.Amount}}</p>
            <p>{{m.Name}}</p>
          </div>
        </div>
        <div class="table-text">
          <div class="table-rows" v-for="m in listData.PayInfo.List[1]" :key="m.Name">
            <p>{{m.Amount}}</p>
            <p>{{m.Name}}</p>
          </div>
        </div>
      </div>
      <div class="main-text">
        <h5 class="text-title">支出
          <p>￥{{listData.RefundInfo.AllAmount}}</p>
        </h5>
        <div class="table-text">
          <div class="table-rows" v-for="m in listData.RefundInfo.List[0]" :key="m.Name">
            <p>{{m.Amount}}</p>
            <p>{{m.Name}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
  export default {
    data() {
      return {
        dateTime:[],
        searchData:{
          startDate:'',
          endDate:''
        },
        listData:''
      }
    },
    methods: {
      getDate(date){
        this.searchData.startDate=this.$format('yyyy-MM-dd',new Date(date[0]))
        this.searchData.endDate=this.$format('yyyy-MM-dd',new Date(date[1]))
      },
      initList(){
        this.getList();
      },
      getList(){
        this.$ajax.GetHotelOrderRevenue(this.searchData).then(res=>{
          if(res.Success){
            this.listData=res.Data;
            console.log(this.listData)
          }
        })
      },
      handleExcel(){
        let data=_.cloneDeep(this.searchData);
        data=this.$urlEncode(data);
        window.open(this.$api.CreatePaymentToExportExcel+'?'+data);
			},
    },
    created(){
      this.dateTime=[new Date(new Date().getTime() - 3600 * 1000 * 24),new Date(new Date().getTime() - 3600 * 1000 * 24)];
      this.getDate(this.dateTime);
      this.getList();
    }
  }
</script>
